import React,{useEffect, useState} from 'react'

export default function MultEffectHookDemo() {
    const [count, setCount] = useState(0);
    const [login, setLogin] = useState(true);
    //useEffect可以定义多个，同时进行使用，好处：可以将功能细分，一个useEffect处理一个事件
    useEffect(() => {
        console.log("修改Dom",count);
    },[count]);
    useEffect(() =>{
        console.log("订阅事件");
    },[]); //只想在第一次的时候做订阅，加上空的数组

    useEffect(()=>{
        console.log("网络请求");
    },[]); //一般网络请求只需要做一次就可以了，所以加[],防止频繁进行网络请求的操作

    useEffect(()=>{
        console.log(login);
    },[login]);
    /**
     * 关于useEffect第三个参数的说明
     * 默认情况下useEffect在组件发生更新的时候会执行回调函数，进行页面的重新渲染
     * 但有些事件并不需要随着某个不相干的数据发生改变时进行内部函数的回调，例如网络请求，事件订阅，只需要在组件第一次渲染的时候，进行
     * 函数的回调就可以了
     * 所以再某些情况下要传入useEffect的第二个参数，传入一个数组，标明这个事件发生所依赖的变量，
     * 当这个变量发生改变的时候，执行useEffect传入的回调函数，
     * 传入空的数组的时候，就标明这个事件的执行谁都不依赖,只会在这个组件第一次渲染的时候执行一次
     */

    return (
        <div>
            <h2>MultEffectHookDemo</h2>
            <h2>{count}</h2>
            <button onClick={e => setCount(count + 1)}>+1</button>
            <h2>{login ? "登录" : "请登录"}</h2>
            <button onClick={e => setLogin(!login)}>登录/注销</button>
        </div>
    )
}
